<!--分收入源趋势跟踪-->
<template>
    <div class="fenqy">
        <div class="operation">
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="选择区域">
                    <dx-cascader :area_id.sync="form.areaId" />
                    <!-- <el-select v-model="form.areaId" placeholder="选择区域" @change="areaChange($event)">
            <el-option
              v-for="item in areaList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select> -->
                </el-form-item>
                <el-form-item
                    label="账期"
                    style="width: 370px;"
                    class="imcome-picker"
                >
                    <!-- <el-date-picker v-model="form.year" value-format="yyyy" type="year" placeholder="选择月"></el-date-picker> -->
                    <el-date-picker
                        style="width: 110px;"
                        v-model="form.startDate"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择月"
                    ></el-date-picker>
                    <span>~</span>
                    <el-date-picker
                        style="width: 110px; margin-right: 15px;"
                        v-model="form.endDate"
                        value-format="yyyyMM"
                        type="month"
                        placeholder="选择月"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="码号">
                    <el-select v-model="form.mh" clearable>
                        <el-option
                            v-for="(it, i) in mhList"
                            :key="i"
                            :label="it.label"
                            :value="it.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="大单">
                    <el-select v-model="form.big" clearable>
                        <el-option
                            v-for="(it, i) in bigList"
                            :key="i"
                            :label="it.label"
                            :value="it.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="存增量">
                    <el-select v-model="form.type" clearable>
                        <el-option
                            v-for="(it, i) in typeList"
                            :key="i"
                            :label="it.label"
                            :value="it.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="锁定">
                    <el-select v-model="form.lock" clearable>
                        <el-option
                            v-for="(it, i) in lockList"
                            :key="i"
                            :label="it.label"
                            :value="it.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 40%">
                    <el-button size="small" type="primary" @click="submitHandle"
                        >查询</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="exportExcel(true)"
                        style="margin-left: 20px"
                        >批量导出</el-button
                    >
                    <el-button
                        size="small"
                        type="orange"
                        @click="exportExcel(false)"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <p class="g-unit">单位: 元</p>
        <div style="border-bottom:1px solid #EBEEF5;" class="tableBox">
            <el-table
                border
                stripe
                v-loading="tableLoading"
                :data="tableData"
                style="width: 100%"
                class="tableTh28"
                height="65vh"
                ref="table"
            >
                <!--    :span-method="arraySpanMethod" -->
                <el-table-column
                    fixed
                    prop="ysincomecatgname"
                    label="来源大类"
                    width="140px"
                ></el-table-column>
                <el-table-column
                    fixed
                    prop="incomedetail"
                    label="来源明细"
                    width="120px"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    fixed
                    prop="producttypename"
                    label="产品大类"
                    width="140px"
                ></el-table-column>
                <el-table-column
                    fixed
                    prop="producttypedetailname"
                    label="产品明细"
                    width="120px"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    v-for="(it, index) in title"
                    min-width="80"
                    :key="index"
                    :label="it"
                    :prop="'aft_' + it"
                ></el-table-column>
            </el-table>
            <el-pagination class="page" 
                layout="total, prev, pager, next, jumper"
                :page-sizes="[20, 50, 100]"
                @size-change="sizeChange"
                :page-size="pageSize"
                :total="dataTotal"
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { createSpan } from "@/utils/mixin";
import prefixAPI from "@/api/prefixAPI";
import { getCookie, setCookie } from "@/common/js/cookie";

let accountInfo = JSON.parse(getSessionStorage("accountInfo"));

export default {
    props: {
        areaList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            form: {
                areaId: accountInfo.areaId,
                year: this.moment().format("YYYY"),
                startDate: "",
                endDate: "",
                mh: "",
                big: "",
                type: "",
                lock: ""
            },
            accountInfo: "",
            tableLoading: false,
            tableData: [],
            count: "",
            titleList: [],
            tableTemp: [
                { title1: "01_省计费平台出账", title2: "01_OCS出账收入" },
                { title1: "01_省计费平台出账", title2: "02_集团出账收入" },
                { title1: "01_省计费平台出账", title2: "03_OOCP一次性" },
                { title1: "01_省计费平台出账", title2: "04_OCS/OOCP分摊收入" },
                { title1: "01_省计费平台出账", title2: "05_欠费不确认" },
                { title1: "01_省计费平台出账", title2: "06_欠费收回" },
                { title1: "01_省计费平台出账", title2: "07_无现金流（赠金）" },
                { title1: "01_省计费平台出账", title2: "09_流量递延收入" },
                { title1: "01_省计费平台出账", title2: "99_其他" },
                { title1: "01_省计费平台出账", title2: "小计" },
                { title1: "02_省公司人工收入", title2: "01_网间结算" },
                { title1: "02_省公司人工收入", title2: "02_网内结算" },
                { title1: "02_省公司人工收入", title2: "03_省公司分摊收入" },
                { title1: "02_省公司人工收入", title2: "04_积分计提" },
                { title1: "02_省公司人工收入", title2: "05_积分兑换" },
                { title1: "02_省公司人工收入", title2: "06_省分成结算" },
                { title1: "02_省公司人工收入", title2: "07_预付费卡" },
                { title1: "02_省公司人工收入", title2: "99_其他" },
                { title1: "02_省公司人工收入", title2: "小计" },
                { title1: "03_分公司人工收入", title2: "01_全业务卡捆绑赠送" },
                { title1: "03_分公司人工收入", title2: "02_分公司分成结算" },
                { title1: "03_分公司人工收入", title2: "99_其他" },
                { title1: "03_分公司人工收入", title2: "小计" },
                { title1: "04_新会计准则影响", title2: "01_翼支付话补" },
                { title1: "04_新会计准则影响", title2: "03_手机终端减收" },
                {
                    title1: "04_新会计准则影响",
                    title2: "04_手机终端减收（追溯）"
                },
                { title1: "04_新会计准则影响", title2: "05_代金券减收" },
                {
                    title1: "04_新会计准则影响",
                    title2: "06_代金券减收（追溯）"
                },
                { title1: "04_新会计准则影响", title2: "小计" },
                { title1: "总计", title2: "总计" }
            ],
            mhList: [
                {
                    label: "码号",
                    value: "1"
                },
                {
                    label: "非码号",
                    value: "0"
                }
            ],
            bigList: [
                {
                    label: "大单",
                    value: "1"
                },
                {
                    label: "非大单",
                    value: "0"
                }
            ],
            typeList: [
                {
                    label: "全量",
                    value: "QL"
                },
                {
                    label: "存增量",
                    value: "CZL"
                },
                {
                    label: "存存量",
                    value: "CCL"
                },
                {
                    label: "增量",
                    value: "ZL"
                }
            ],
            lockList: [
                {
                    label: "锁定",
                    value: "1"
                },
                {
                    label: "非锁定",
                    value: "0"
                }
            ],
            title: [],
            pageSize: 10,
            currentPage: 1,
            dataTotal: null,
            // time:Date.parse(new Date()),
        };
    },
    created() {
        this.init();
        // this.form.year = this.moment().subtract(1,'months').format('YYYYMM')
    },
    methods: {
        // 初始化
        init() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            // this.getCompanyByLvl();

            this.getMarketMonth();
            // this.submitHandle();
        },
        getMarketMonth() {
            let areaId = this.form.areaId
                ? this.form.areaId
                : this.accountInfo.areaId;
            let isMonthReport = 1;
            $budgetAPI.getIncomeSourceMonth(
                { areaId: areaId, isMonthReport: isMonthReport },
                res => {
                    if (res || res.code == 0) {
                        this.form.startDate = res.content.preSixMonth;
                        this.form.endDate = res.content.maxAcctMonth;
                        this.getData(
                            areaId,
                            this.form.startDate,
                            this.form.endDate
                        );
                    }
                },
                err => {}
            );
        },
        submitHandle() {
            let areaId = this.form.areaId
                ? this.form.areaId
                : this.accountInfo.areaId;
            let startTime = this.form.startDate || "",
                endTime = this.form.endDate || "";
            this.getData(areaId, startTime, endTime);
        },
        getData(areaId, startTime, endTime) {
            let that = this,
                title = [];
            this.tableLoading = true;

            // findNewIncomeTrendBySource
            $budgetAPI.findNewIncomeTrendBySource(
                {
                    areaId: areaId,
                    startDate: startTime,
                    endDate: endTime,
                    mhIncomeFlg: that.form.mh,
                    bigIncomeFlg: that.form.big,
                    custTypeNew: that.form.type == "QL" ? "" : that.form.type,
                    custLockFlg: that.form.lock,
                    currentPage: that.currentPage
                },
                res => {
                    this.tableLoading = false;
                    if (res.code === 0) {
                        let content = res.content;
                        // that.titleList = content.titles;
                        // content.map(it => {
                        //   it.map(item => {
                        //     it[item.acctMonth] = item.indexValue;
                        //   });
                        // });
                        // content.titles.map(it=> {
                        //     title = [...title, it.substr(-2)];
                        // })

                        that.title = content.titles;
                        that.tableData = content.data.items;
                        that.dataTotal = content.data.totalNum;
                        // this.tableTemp = this.mergeTableTemp(res.content);
                        // this.spanArr = createSpan(this.tableTemp, ["indexCode", "areaName"]);
                        // this.tableData = this.tableTemp;
                    } else {
                        this.alertError(res);
                    }
                    this.$nextTick(() => {
                        this.$refs.table.doLayout();
                    });
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        // 合并tebleTemp和请求数据
        mergeTableTemp(content) {
            let newArr = [];
            for (let i = 0; i < content.length; i++) {
                for (let j = 0; j < content[i].list.length; j++) {
                    newArr.push({
                        indexCode: content[i].indexCode,
                        ...content[i].list[j]
                    });
                }
            }
            console.log("newArr", newArr);
            return newArr;
        },
        //分产品导出
        exportExcel(type) {
            let areaId = this.form.areaId,
                startTime = this.form.startDate,
                endTime = this.form.endDate,
                mhIncomeFlg = this.form.mh,
                bigIncomeFlg = this.form.big,
                custTypeNew = this.form.type == "QL" ? "" : this.form.type,
                custLockFlg = this.form.lock;

            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/incomeAndIncomeSource/exportIncomeSourceData?areaId=" +
                    areaId +
                    "&startDate=" +
                    startTime +
                    "&endDate=" +
                    endTime +
                    "&flag=" +
                    type +
                    '&mhIncomeFlg=' + mhIncomeFlg + 
                    '&bigIncomeFlg=' + bigIncomeFlg + 
                    '&custTypeNew=' + custTypeNew + 
                    '&custLockFlg=' + custLockFlg + 
                    "&token=" +
                    getCookie("token");
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/incomeAndIncomeSource/exportIncomeSourceData?areaId=" +
                    areaId +
                    "&startDate=" +
                    startTime +
                    "&endDate=" +
                    endTime +
                    "&flag=" +
                    type +
                    '&mhIncomeFlg=' + mhIncomeFlg + 
                    '&bigIncomeFlg=' + bigIncomeFlg + 
                    '&custTypeNew=' + custTypeNew + 
                    '&custLockFlg=' + custLockFlg + 
                    "&token=" +
                    getCookie("token");
            }
        },
        //获取当前时间
        formatDate: function(value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y;
        },
        //table合并行
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1) {
                return this.spanArr[columnIndex][rowIndex];
            }
        },
        //区域选择 返回ID和name
        areaChange(event) {
            let temp = this.areaList.find(item => {
                return (item.areaId = event);
            });
            this.form.areaName = temp.areaName;
        },
        sizeChange(val) {
            this.pageSize = val;
            this.submitHandle();
        },
        //翻页操作
        handleCurrentChange(page) {
            this.currentPage = page;
            this.submitHandle();
        }
        //根据层级获取区域树
        // getCompanyByLvl(){
        //   $budgetAPI.getCompanyByLvl({
        //     lvl:this.accountInfo.areaLvl,
        //     areaId:this.accountInfo.areaId
        //   },res =>{
        //     if (res.code == 0) {
        //       this.areaList = res.content;
        //     } else {
        //       this.alertError(res);
        //     }
        //   },err =>{

        //   })
        // }
    }
};
</script>
<style lang="scss" scoped>
.formList .el-form-item {
    width: 22%;
}
</style>
<style lang="scss">
.fenqy {
    .firstProject,
    .secondProject {
        .cell {
            color: #000;
            font-weight: 700;
        }
    }
    .firstProject.is-leaf {
        position: relative;
        border-right: 1px solid #d7e5fb !important;
        .cell {
            color: #d7e5fb;
        }
    }
    .secondProject.is-leaf {
        overflow: visible;
        // border-left: 2px solid #d7e5fb;
        .cell {
            transform: translateX(-38%);
        }
    }
}
</style>
